function $(selector) {
    return document.querySelector(selector);
}

var imgBox = $(".imgBox");
var Block = $(".Block");
var Empty = $(".Empty");
var title = $(".card h2");
var bar = $(".bar");
var btn = $(".btn");
var span = $(".bar span");

function init() {
    /* 随机照片 */
    img();

    /* 随机生成空缺矩形的位置 */
    /* 高度范围:0~imgBox的高度减去Empty的高度 */
    var heightRange = imgBox.offsetHeight - Empty.offsetHeight;
    /* 宽度范围：imgBox宽度的一半~imgBox宽度减去Empty的宽度 */
    var widthRange = imgBox.offsetWidth / 2 - Empty.offsetWidth;
    var eTop = Math.random() * heightRange;
    var eLeft = Math.random() * widthRange + imgBox.offsetWidth / 2;

    /* 给empty盒子设置位置 */
    Empty.style.left = eLeft + 'px';
    Empty.style.top = eTop + 'px';


    /* 设置Block的位置 */
    Block.style.left = '0px';
    Block.style.top = eTop + 'px';

    /* 设置Block的背景图片 */
    Block.style.backgroundPosition = `${-eLeft-5}px ${-eTop}px`


    /* 设置滑动条 */
    /* 按下按钮，1.文字消失，方块出现2.title文字， title文字颜色为黑色*/
    btn.onmousedown = function (e) {
        Block.style.opacity = "1";
        span.style.opacity = "0";
        title.innerText = "完成拖动验证";
        title.style.color = "black";
        Block.style.transition = 'none';
        btn.style.transition = 'none';

        /* 在bar滑动事件 */
        bar.onmousemove = function (E) {
            var newLeft = E.clientX - bar.offsetLeft - e.offsetX;
            if (newLeft < -2) {
                newLeft = -2
            }
            if (newLeft > (imgBox.offsetWidth - Block.offsetWidth)) {
                newLeft = imgBox.offsetWidth - Block.offsetWidth
            }
            Block.style.left = newLeft + 'px';
            btn.style.left = newLeft + 'px';
        }


        /* 细节：绑定在docuemnt上 */
        document.onmouseup = function () {
            var diffLeft = Empty.offsetLeft - Block.offsetLeft; //两个方块的差值
            if (diffLeft > -5 && diffLeft < 5) {
                /* 验证成功 */
                title.innerText = "验证成功";
                title.style.color = 'green';
                //两个滑块消失
                Block.style.opacity = 0;
                Empty.style.opacity = 0;
                /* 删除事件 */
                bar.onmousemove = btn.onmousedown = document.onmouseup = null;

            } else {
                title.innerText = "验证失败";
                title.style.color = 'red';
                bar.onmousemove = document.onmouseup = null;
                // btn.style.transition="all .5"
                Block.style.left = "0px";
                btn.style.left = "-2px";
                span.style.opacity = 1;
                Block.style.transition = 'all .3s';
                btn.style.transition = 'all .3s';

            }

        }
    }

}
init();

function img() {
    /* 随机照片地址 */
    var randomNum = Math.ceil(Math.random() * 5);
    var randomImg = `t${randomNum}.png`;
    /* 给图片容器和拖动方块设置背景图 */
    imgBox.style.backgroundImage = `url('./img/${randomImg}')`;
    Block.style.backgroundImage = `url('./img/${randomImg}')`;
}
$(".title a").onclick = img;